import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators'
import store from '@/core/store'
import elementVariables from '@/assets/styles/element/element-variables.scss'
import defaultSettings from '@/core/config/settings'

export interface ISettingsState {
    theme: string
    fixedHeader: boolean
    showSettings: boolean
    showTagsView: boolean
    showSidebarLogo: boolean
    sidebarTextTheme: boolean
}

@Module({dynamic: true, store, name: 'settings'})
class Settings extends VuexModule implements ISettingsState {
    public theme = elementVariables.theme;
    public fixedHeader = defaultSettings.fixedHeader;
    public showSettings = defaultSettings.showSettings;
    public showTagsView = defaultSettings.showTagsView;
    public showSidebarLogo = defaultSettings.showSidebarLogo;
    public sidebarTextTheme = defaultSettings.sidebarTextTheme;

    @Mutation
    private CHANGE_SETTING(payload: { key: string, value: any }) {
        const {key, value} = payload;
        if (Object.prototype.hasOwnProperty.call(this, key)) {
            (this as any)[key] = value
        }
    }

    @Action
    public ChangeSetting(payload: { key: string, value: any }) {
        this.CHANGE_SETTING(payload)
    }
}

export const SettingsModule = getModule(Settings)
